﻿
@{
    ViewData["Title"] = "Service";
}
@section Head{
    <link href="~/assets/libs/Bootstrap-Table/bootstrap-table.min.css" rel="stylesheet">
}
@section Foot{
    <script src="~/assets/libs/Bootstrap-Table/bootstrap-table.min.js"></script>
    <script>
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null)
                return unescape(r[2]);
            return "";
        }
        var vm = new Vue({
            el: '#form',
            data: {
                server: getUrlParam("server"),
            },
            mounted: function () {
                this.loadData();
            },
            methods: {
                formatDetail: function (value, row, index) {
                    return "<span onclick='vm.detail(\"" + row.id + "\")' class='glyphicon glyphicon-list' aria-hidden='true'></span>";
                },
                detail: function (code) {
                    window.location.href = "/servicesmanager/service?server=" + code;
                },
                responseHandler: function (resp) {
                    return resp;
                },
                loadData: function () {
                    $.get("/servicesmanager/getservices?server=" + this.server, function (resp) {

                        $("#table").bootstrapTable("load", resp);
                    });
                },
                detailFormatter: function (index, row) {
                    var html = [];
                    $.each(row.Metadatas, function (key, value) {
                        html.push('<p><b>' + key + '</b>:' + value + '</p>');
                    });
                    return html.join('');
                }

            }
        });
    </script>
}

<div class="container" id="form">
    <h4>Server:{{server}}</h4>
    <table id="table" data-toggle="table"
           data-search="true"
           data-show-refresh="true"
           data-detail-view="true"
           data-detail-formatter="vm.detailFormatter">
        <thead>
            <tr>
                <th data-field="Id">Id</th>
                <th data-field="RoutePath">Address</th>
                <th data-field="Metadatas.Name">Description</th>
                @*<th data-filed="_detail" data-formatter="vm.formatDetail"></th>*@
            </tr>
        </thead>
    </table>
</div>